<template>
  <div class="videoView">
    <header-nav />
    <top-nav ref="topNav" @navClick="listenNavClick" />
    <van-swipe
      class="swipe w"
      :show-indicators="false"
      :loop="false"
      @change="swipeChange"
      ref="vanSwipe"
    >
      <van-swipe-item>
        <show-video :recommendVideoList="recommendVideoData" />
      </van-swipe-item>
      <van-swipe-item>
        <show-video :MVList="MVData" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import HeaderNav from "@/components/common/HeaderNav.vue";
import TopNav from "@/components/video/TopNav.vue";
import ShowVideo from "@/components/video/ShowVideo.vue";
import { Swipe, SwipeItem } from "vant";
import { recommendVideo, MV } from "@/network/api/video";

export default {
  name: "VideoView",
  components: {
    HeaderNav,
    TopNav,
    ShowVideo,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      recommendVideoData: [],
      MVData: [],
    };
  },
  created() {
    this.getRecommendVideo();
    this.getMV();
  },
  methods: {
    swipeChange(index) {
      this.$refs.topNav.currentIndex = index;
    },
    listenNavClick(index) {
      index === 0 ? this.$refs.vanSwipe.prev() : this.$refs.vanSwipe.next();
    },
    getRecommendVideo() {
      recommendVideo("/mv/all", { limit: 20 }).then((res) => {
        if (res.code === 200) {
          this.recommendVideoData = res.data;
        }
      });
    },
    getMV() {
      MV("/mv/exclusive/rcmd", { limit: 20 }).then((res) => {
        if (res.code === 200) {
          this.MVData = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>